<template>
  <div class="goodsinfo">
      <!-- 商品轮播图区域 -->
        <swiper :lunbotu="lunbotu" :isfull="false"></swiper>
      <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<span class="old">￥{{goodsinfo.market_price}}</span>
                            销售价：<span class="now">￥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>购买数量：<numbox ref="num" @getcount="getcount" :max="goodsinfo.stock_quantity"></numbox></p>
                        <mt-button type="primary">立即购买</mt-button>
                        <mt-button type="danger" @click="addCar">加入购物车</mt-button>
					</div>
				</div>
		</div>
        <!-- 商品参数 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
                        <p>库存情况：{{goodsinfo.stock_quantity}}</p>
                        <p>上架时间：{{goodsinfo.add_time}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
                </div>
		</div>

  </div>
</template>

<script>
import swiper from '@/components/public/swiper.vue'
import numbox from '@/components/public/goods-numbox.vue'
    export default {
        data(){
            return {
                id: this.$route.params.id, //获取商品id
                lunbotu: [],//轮播图数据
                goodsinfo: '',//商品数据
                count: 1//选中商品数量
            }
        },
        created(){
            this.getlunbotu(),
            this.getgoodsinfo(),
            this.getcount()
        },
        components: {
            swiper,
            numbox,
            
        },
        methods: {
            getlunbotu(){
                //获取轮播图数据
                this.$http.get('api/getthumimages/'+this.id).then(result=>{
                    if(result.body.status == 0){
                        this.lunbotu = result.body.message
                        this.lunbotu.forEach(item=>{
                            item.img = item.src
                        })
                    }
                })
            },
            getgoodsinfo(){
                //获取商品数据
                this.$http.get('api/goods/getinfo/' + this.id).then(result=>{
                    if(result.body.status == 0){
                        this.goodsinfo = result.body.message[0]
                    }
                })
            },
            goDesc(id){
                this.$router.push({name: "goodsDesc", params: {id}})
            },
            goComment(id){
                this.$router.push({name: 'goodsCompent',params: {id}})
            },
            addCar(){
                //加入购物车数据id,count,price,selected:false
                //这里如果不给id加一个parseInt的话第一个商品数据的id是字符串
                var goods = {id: parseInt(this.id),count: this.count,price:this.goodsinfo.sell_price,selected:true}
                this.$store.commit('savecar',goods)
            },
            getcount(count=1){  //子组件通过事件调用向父组件传值,默认数量为1
                this.count = count
            }
        }
    }

</script>

<style scoped>
    .goodsinfo {
        overflow: hidden;
    }
    .old {
        margin-right: 10px
    }
    .now {
        color: red
    }
    button {
        font-weight: normal;
        height: 40px;
        color: #fff;
        margin: 10px 0
    }
    .mui-card-footer {
        display: block
    }
   
</style>




